<template>
    <div class='app-classify'>
        <div class='classify-box'>
            <!-- 搜索 -->
            <div id="search-box">
                <a href="#">
                    <div class="box-search">
                        <input type="search" id="keyword" name="keyword" x-webkit-speech="" placeholder="搜索商品" autocomplete="off" value="" disabled="">
                    </div>
                    <button id="search-submit" type="submit">
                        <img src="//jp.juancdn.com/jpwebapp_v1/images_v1/icon/search.png?f4e07c7d-1&amp;sv=449ce9ee">
                    </button>
                </a>
            </div>
            <main>
                <ul class='classify-left'>
                    <router-link keep-alive tag='li' active-class='active'
                        v-for = '(classify,index) in classifyLeft'
                        :to ='{params: { id: classify.id},query:{list:index}}'
                        :key='classify.id'
                    >{{classify.name}}</router-link>
                </ul>
                <div class='classify-right'>
                    <Classifylist v-if='hashList' :hashlist = 'hashList[$route.query.list]'></Classifylist>
                </div>
            </main>
        </div>
    </div>
</template>

<script>
    import Vue from 'vue'
    import  VueJsonp  from  'vue-jsonp'
    import Classifylist from 'views/classify/classify-list.vue'
    import BScroll from 'better-scroll'
    import { Indicator , Toast } from 'mint-ui'

    Vue.use(VueJsonp)
    
    export default {
        components:{
            Classifylist
        },
        data(){
            return{
                classifyLeft:null,
                hashList:null
            }
        },
        created(){
            let that = this
            Indicator.open({
                text: '加载中~',
                spinnerType: 'fading-circle'
            });
            Vue.jsonp('https://m.juanpi.com/cate/catelist',{
                pf: 8,
                area: 4,
                bi: 222,
                dtype: 'jsonp',
                _: 1551269789324,
                callback: 'jsonp1',
            })
            .then(json => {
                let data = {...json} 
                this.classifyLeft = data
                this.hashList = json
                 Indicator.close()
            })
            .catch(err => console.log(err))
            
        },
        updated(){
            new BScroll('.app-classify',{
                click:true
            })
        }
    }

</script>

<style lang="stylus" scoped>
.app-classify
    width 100%
    height 100%
    background #fff

    overflow hidden
    .classify-box
        width 100%
        display flex
        flex-direction column
        #search-box
            width 94%
            float left
            position relative
            margin .23rem
            border-radius 5px
            background-color #fff
            padding .058rem 0
            height  auto
            overflow hidden
            border 1px solid #bbb
            .box-search
                width 98%
                position relative
                margin-left .12rem
                height .48rem
                line-height .48rem
                padding 0
                vertical-align middle
                background-color #fff
                color #999
                float left
                input
                    font -webkit-small-control
                    font-size .26rem
                    color #999
                    letter-spacing normal
                    word-spacing normal
                    text-transform none
                    text-indent 0
                    text-shadow none
                    display inline-block
                    text-align start
                    border none
                    outline-style none
                    word-break normal
                    vertical-align middle
                    height .48rem
                    line-height .49rem
                    margin-left .6rem
                    position absolute
                    background-color transparent
            #search-submit
                display block
                position absolute
                top 0.05rem
                left .12rem
                border 0
                cursor pointer
                background none
                img
                    height .48rem
                    vertical-align middle
        main
            flex 1
            display flex
            .classify-left
                width 25%
                text-indent .3rem
                padding-bottom .98rem
                li  
                    height .9rem
                    line-height .9rem
                    border-bottom 1px solid #ebebeb
                    cursor pointer
                    border-left 4px solid #f9f9f9
                    font-size .28rem
                    background #f9f9f9
                    &.active
                        color #ff464e
                        border-left 4px solid #ff464e
                        background-color #fff
            .classify-right
                flex 1
                padding-left 4%
                margin-top .2rem



</style>